<template>
  <view class="page-container">
    <!-- 顶部用户信息 -->
    <view class="header">
      <text class="welcome-text">欢迎 {{ userInfo.name}}用户</text>
			<u-icon name="scan"  size="23"></u-icon>
    </view>
		
    <!-- Tab 菜单 -->
    <view class="tab-menu">
			<u-subsection activeColor="var(--primary-color)" :list="tabs" :current="current" @change="sectionChange"></u-subsection>
    </view>
		
		<!-- 主题内容 -->
		<view class="non-urgent-service">
			<view v-if="current === 0">
				<tab1 ref="tab1"></tab1>
			</view>
			<view v-else-if="current === 1">
				<tab2 ref="tab2"></tab2>
			</view>
			<view v-else-if="current === 2">
				<tab3 ref="tab3"></tab3>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<view class="bottom-nav">
			<view class="nav-item" @tap="navigateTo('index')">
				<text>首页</text>
			</view>
			<view class="nav-item" @tap="navigateTo('mine')">
				<text>我的</text>
			</view>
		</view>
  </view>
</template>
<script>
import tab1 from '@/pages/tabbar/index/tab1/index.vue'
import tab2 from '@/pages/tabbar/index/tab2/index.vue'
import tab3 from '@/pages/tabbar/index/tab3/index.vue'
export default {
	components: { tab1, tab2, tab3 },
  data() {
    return {
      tabs: ['非紧急', '保养', '维修'], // Tab 菜单
			current: 0,
      userInfo: {
				name: '',
				isMember: false
			},
		};
  },
	onLoad() {
		// 从缓存加载用户信息
		this.loadUserInfo();
	},
	mounted() {
	},
  methods: {
		 // 加载用户数据
		loadUserInfo() {
			const info = uni.getStorageSync('userInfo') || {};
			this.userInfo = {
				name: info.name || '新',
				isMember: info.membership === 'vip' // 根据实际字段调整
			};
		},
		//菜单切换
		sectionChange(index) {
      this.current = index;
    },
    navigateTo(page) {
      console.log('跳转到：', page);
      uni.navigateTo({
        url: `/pages/tabbar/${page}/${page}`, // 示例路径
      });
    },
  },
};
</script>
<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  height: 90vh;
  background-color: var(--primary-backgrond-color);
	.header {
	  padding: 0.6rem 1rem;
	  background-color: var(--primary-backgrond-color);
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.non-urgent-service{
		position: relative;
		background-color: #fff;
		margin: 0.6rem;
		min-height: 70vh;
		overflow: hidden;
		padding-bottom: 20rpx;
	}
	.welcome-text {
	  font-size: 1rem;
		color: var(--text-color-g);
		padding: 1rpx 0;
	}
	.tab-menu {
		font-size: 1rem;
	  display: flex;
	  justify-content: space-around;
	  background-color: var(--primary-backgrond-color);
		margin: 1rem 0.6rem;
	}
	
	.bottom-nav {
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  height: 50px;
	  display: flex;
	  background-color: #fff;
	  border-top: 1px solid #ddd;
	}
	
	.nav-item {
	  flex: 1;
	  text-align: center;
	  line-height: 50px;
	  font-size: 16px;
	  color: var(--text-color-b);
	}
}
/deep/ .u-subsection__item__text{
	font-size: 14px !important;
}
</style>
